import React from 'react';
import {
  Breadcrumb, Table, Tag, Button 
} from 'antd';
import {
  FileSearchOutlined
} from '@ant-design/icons';
// import Crumb from "../../components/Crumb";
import './index.css';

class SITList extends React.PureComponent {
  onClickDetail(param) {
    if (param === "合同监管系统") {
      window.changeView('/sitDetail');
    }
  }

  render() {
    const columns = [
      {
        title: '序号',
        key: 'order',
        align: "center",
        render: (_, record, index) => index + 1
      },
      {
        title: '系统名称',
        dataIndex: 'name',
        key: 'name',
        align: "center"
      },
      {
        title: '业务服务',
        dataIndex: 'business',
        key: 'business',
        align: "center"
      },
      {
        title: '基础服务',
        dataIndex: 'basic',
        key: 'basic',
        align: "center"
      },
      {
        title: '第三方服务',
        dataIndex: 'thirdParty',
        key: 'thirdParty',
        align: "center"
      },
      {
        title: '状态',
        key: 'status',
        dataIndex: 'status',
        align: "center",
        render: (_, { status }) => (
          <>
            {status.map((tag) => {
              let color = tag.length > 5 ? 'geekblue' : 'green';
              if (tag === '正常') {
                color = '#0cc891';
              } else if (tag === '异常') {
                color = '#ff9599';
              }
              return (
                <Tag color={color} key={tag}>
                  {tag.toUpperCase()}
                </Tag>
              );
            })}
          </>
        )
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        align: "center"
      },
      {
        title: '操作',
        key: 'action',
        align: "center",
        render: (_, record) => (
          <Button type="link" onClick={() => { this.onClickDetail(record.name); }} icon={<FileSearchOutlined />}>详情</Button>
        )
      }
    ];
    const data = [
      {
        key: '1',
        name: '合同监管系统',
        business: "11/24",
        basic: '3/4',
        thirdParty: "1/1",
        status: ['正常'],
        createTime: "2023.06.21"
      },
      {
        key: '2',
        name: '装备管理系统',
        business: "8/12",
        basic: '3/5',
        thirdParty: "1/1",
        status: ['正常'],
        createTime: "2023.07.15"
      },
      {
        key: '3',
        name: '协同研发平台',
        business: "12/12",
        basic: '4/5',
        thirdParty: "1/1",
        status: ['异常'],
        createTime: "2023.07.15"
      }
    ];
    const breadcrumbItems = [
      {
        title: '首页',
        href: "/"
      },
      {
        title: <a href="/sitList">开发测试环境（SIT）</a>
      }
    ];
    return (
      <div className="sitList">
        {/* <div style={{ display: "flex", alignItems: "center" }}>
          <Button
          type="text"
          onClick={() => { window.history.back(); }}
          >
            {`< 返回`}

          </Button>
          <Breadcrumb
            separator=">"
            items={breadcrumbItems}
          />
        </div> */}
        <div style={{ width: "100%", padding: "20px 0px" }}>
          <Table columns={columns} dataSource={data} />
        </div>
      </div>
    );
  }
}

export default SITList;
